<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="icon" href="/images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/css/rester.css">
    <link rel="stylesheet" href="/css/iconfont-mall.css">
    <link rel="stylesheet" href="/css/cart.css">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/js/jquery1.12.4.min.js"></script>
    <script src="/js/cart.js"></script>

</head>
<body>
<div id="header">
    <div class="container h_inner">
        <ul class="l_nav">
            <li>
                <a href="/">首页</a>
                <span class="bg"></span>
            </li>
            <li>
                <a href="./index.html">华为官网</a>
                <span class="bg"></span>
            </li>
            <li>
                <a href="#">荣耀官网</a>
                <span class="bg"></span>
            </li>
            <li>
                <a href="#">花粉俱乐部</a>
                <span class="bg"></span>
            </li>
            <li>
                <a href="#">V码(优购码)</a>
                <span class="bg"></span>
            </li>
            <li>
                <a href="#">企业购</a>
                <span class="bg"></span>
            </li>
            <li>
                <a href="javascript:;">Select Region</a>
                <span class="bg"></span>
            </li>
            <li class="s_down">
                <a href="javascript:;">更多精彩 <i class="iconfont icon-shangxiajiantou"></i></a>
                <div class="b">
                    <ul>
                        <li>
                            <a href="#">EMUL</a>
                        </li>
                        <li>
                            <a href="#">应用市场</a>
                        </li>
                        <li>
                            <a href="#">华为终端云空间</a>
                        </li>
                        <li>
                            <a href="#">开发者联盟</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
        <ul class="r_nav">
            <li>
                <a th:if="${session.currentUser == null}" href="/login/">请登录</a>
                <a th:if="${session.currentUser == null}" href="/register">注册</a>
                <a th:if="${session.currentUser != null}" href="/personal/">[[${session.currentUser.username}]]</a>
                <a th:if="${session.currentUser != null}" href="/logout/">退出</a>
                <span class="bg"></span>
            </li>
            <li>
                <a href="#">我的订单</a>
                <span class="bg"></span>
            </li>
            <li class="s_down">
                <a href="#">客户服务 <i class="iconfont icon-shangxiajiantou"></i></a>
                <span class="bg"></span>
                <div class="b" style="width: 84px;">
                    <ul>
                        <li>
                            <a href="#">服务中心</a>
                        </li>
                        <li>
                            <a href="#">联系客服</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#">网站导航 <i class="iconfont icon-shangxiajiantou"></i></a>
                <span class="bg"></span>
            </li>
            <li>
                <a href="#">手机版 <i class="iconfont icon-shangxiajiantou"></i></a>
            </li>
        </ul>
    </div>
</div>
<div id="top">
    <div class="container top">
        <div class="left">
            <div class="logo">
                <a href="index.html" title="华为商城">
                    <img src="https://res.vmallres.com/pimages//sale/2019-01/AF2GXbxrWmRqvyNfYzCl.png" alt="">
                </a>
            </div>
            <span>我的购物车</span>
        </div>
        <div class="right">
            <div class="mycurt"></div>
        </div>
    </div>
</div>

<div id="main">
    <div class="container m_inner">
        <div class="h20"></div>

        <div class="products">
            <div class="pro-top">
                <div class="pro-top-left">
                    <span class="checkAll"></span>全选
                </div>
                <ul class="clearfix">
                    <li style="width: 450px;margin-left: 0;text-align: left;">商品</li>
                    <li>单价</li>
                    <li>数量</li>
                    <li>小计</li>
                    <li>操作</li>
                </ul>
            </div>
            <div class="pro-warp">
                <div class="pro-list" th:each="c:${carts}">
                    <div class="pro-list-left">
                        <span th:cid="${c.id}" class="checkThis"></span>
                    </div>
                    <div class="pro-main">
                        <div class="pro-img">
                            <a href="#">
                                <img th:src="${c.imgPath}" alt="">
                            </a>
                        </div>
                        <ul class="clearfix">
                            <li style="width: 450px;">
                                <a th:href="'/product/'+${c.productId}" class="pro-title">[[${c.name}]]
                                    [[${c.edition}]]（[[${c.color}]]）</a>
                                <p class="pro-info">[[${c.color}]] 5G全网通 [[${c.edition}]] 官方标配</p>
                                <div class="p-label">
                                    <span>分期免息</span>
                                </div>
                            </li>
                            <li style="width: 140px;margin-left: 10px;margin-right: -20px;">
                                <div class="pro-price">
                                    <span>￥ [[${c.price}]]</span>
                                </div>
                            </li>
                            <li style="width: 100px;margin-left: 30px;">
                                <div class="pro-stock">
                                    <input type="number" th:cid="${c.id}" class="num" th:value="${c.number}">
                                    <span class="stock-btn">
                                            <a href="javascript:;" class="cut" th:pid="${c.productId}">−</a>
                                            <a href="javascript:;" class="add" th:pid="${c.productId}">+</a>
                                    </span>
                                </div>
                            </li>
                            <li class="pro-total" style="margin-left: 30px;width: 100px;">￥[[${c.price}*${c.number}]]</li>
                            <li style="margin-left: 30px;width: 100px;">
                                <a href="javascript:;" th:cid="${c.id}" class="pro-del">删除</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <form id="orderForm" action="/confirm-order" method="post">
                <input type="hidden" id="ids" name="ids">
                <div class="pro-bottom">
                    <div class="left">
                        <span class="del">全部删除</span>
                        <span class="del2">删除选中的商品</span>
                    </div>
                    <div class="btn">立即结算</div>
                    <div class="allPrice">
                        <p><em>总计：</em> <span class="total-price">¥&nbsp; 0.00</span><i></i></p>
                        <div class="choose">
                            已选择 <span class="number">0</span>件商品
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<th:block th:include="footer"/>
<script src="/layui/layui.js" th:inline="none"></script>

</body>
</html>